<template>
  <!-- 单图 -->
  <view class="imgsingle bg-yellow" :class="listData[0].marginShow ? 'margin-radius' : ''" v-if="listData && listData.length > 0">
    <view v-for="(child, index) in listData" :key="index">
      <view @click="taped(child)">
        <image class="ad-img" :src="child.image" mode="widthFix"></image>
      </view>
      <view class="imgup-btn" v-if="child.buttonText != ''" @click="showSliderInfo(child.linkType, child.linkValue)">
        <button class="coreshop-btn" :style="{ background: child.buttonColor, color: child.textColor }">{{ child.buttonText }}</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ImgSingle',
  props: {
    asData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      count: 0,
      listData: []
    };
  },
  created() {
    this.listData = this.asData;
  },
  methods: {
    taped(item) {
      // this.showSliderInfo(item.linkType, item.linkValue);
      if (!item.linkValue) return;
      uni.navigateTo({
        url: item.linkValue
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.margin-radius {
  margin: 10px;
  border-radius: 6px;
}

.imgsingle {
  overflow: hidden;
  position: relative;

  .ad-img {
    width: 100%;
    float: left;
  }

  .ad-img:last-child {
    margin-bottom: 0;
  }

  .imgup-btn {
    position: absolute;
    z-index: 1;
    bottom: 10px;
    width: 100%;
    min-height: 30px;
    text-align: center;

    .coreshop-btn {
      line-height: 2;
      font-size: 14px;
      padding: 0 25px;
      border-radius: 25px;
    }
  }
}
</style>
